<template>
  <div id="app">
    <!-- 一级路由出口 -->
    <!-- <transition name="slide-fade">
      <router-view v-if="isRouterAlive" />
    </transition> -->
    <transition name="slide-left">
      <router-view class="router-view" />
    </transition>
    <!-- <keep-alive>
      <router-view />
    </keep-alive> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      // reload: this.reload
    }
  },
  // watch: {
  //   // 使用watch 监听$router的变化
  //   $route(to, from) {
  //     // 有主级到次级
  //     if (to.meta.index > from.meta.index) {
  //       this.transitionName = 'slide-left' // 向左滑动
  //     } else if (to.meta.index < from.meta.index) {
  //       // 由次级到主级
  //       this.transitionName = 'slide-right'
  //     } else {
  //       this.transitionName = '' // 同级无过渡效果
  //     }
  //   }
  // },
  data() {
    return {
      // isRouterAlive: true
      transitionName: 'slide-left'
    }
  },
  methods: {
    // reload() {
    //   this.isRouterAlive = false
    //   this.$nextTick(function () {
    //     this.isRouterAlive = true
    //   })
    // }
  }
}
</script>

<style lang="less" >
* {
  margin: 0;
  padding: 0;
}
// .slide-fade {
//   position: fixed;
//   left: 0;
//   right: 0;
//   width: 100%;
// }
// .slide-fade-enter,
// .slide-fade-leave-to {
//   left: 0;
//   top: 0;
//   right: 0;
//   position: absolute;
//   transform: translateX(100%);
// }
// .slide-fade-enter-active {
//   transition: all 0.6s ease;
// }
// .slide-fade-leave-active {
//   transition: all 0.6s ease;
//   transform: translateX(-100%);
//   z-index: 100;
// }

#app {
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
<style lang="less" scoped>
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

.router-view {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.van-badge--fixed {
  z-index: 1000;
}
</style>
